<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="cate_table_header">
        <el-button @click="addCategories" type="primary">添加分类</el-button>
      </div>
      <div class="cate_table_main">
        <tree-table
          :columns="cast_column"
          :data="cate_list"
          :expand-type="false"
          :selection-type="false"
          :show-row-hover="true"
          border
          class="tree-table"
          show-index
          v-loading="cate_tableLoad"
        >
          <template slot="cat_deleted" slot-scope="scope">
            <i
              class="el-icon-success"
              style="color: lightgreen"
              v-if="scope.row.cat_deleted == false"
            ></i>
            <i class="el-icon-error" style="color: red" v-else></i>
          </template>
          <template slot="cat_level" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level == 0">一级</el-tag>
            <el-tag
              size="mini"
              type="success"
              v-else-if="scope.row.cat_level == 1"
              >二级</el-tag
            >
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>
          <template slot="cat_set" slot-scope="scope">
            <el-button
              @click="showEditMessage(scope.row)"
              icon="el-icon-edit"
              size="mini"
              type="primary"
            ></el-button>
            <el-button
              @click="showDeleteMessage(scope.row)"
              icon="el-icon-delete"
              size="mini"
              type="danger"
            ></el-button>
          </template>
        </tree-table>

        <el-pagination
          :current-page="cate_queryInfo.pagenum"
          :page-size="cate_queryInfo.pagesize"
          :page-sizes="[1, 5, 10, 50]"
          :total="cate_total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹层开始 -->
    <el-dialog
      :visible.sync="cate_dialog"
      title="提示"
      width="50%"
      :before-close="cateDialogClose"
    >
      <el-form
        :model="addCateform"
        :rules="addCateformRules"
        ref="addCateformRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateform.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级" prop="parentname">
          <!-- 弹层选择子父级关系开始 -->
          <el-cascader
            style="width: 100%"
            :props="{
              children: 'children',
              label: 'cat_name',
              value: 'cat_id',
              checkStrictly: true,
            }"
            v-model="addCateform.parentname"
            @change="getCurrentParent"
            :options="addCateform.parentlist"
          ></el-cascader>
          <!-- 弹层选择子父级关系结束 -->
        </el-form-item>
        <el-form-item>
          <el-button @click="cate_dialog = false">取 消</el-button>
          <el-button @click="setCategories" type="primary">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 弹层结束 -->
  </div>
</template>
<script>
export default {
  created() {
    //获取分类列表
    this.getCateList()
  },
  data() {
    return {
      //分类查询集合
      cate_queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      set_form: {
        cat_name: '',
        cat_id: 0,
      },
      //分类集合
      cate_list: [],
      cast_column: [
        //定义表格的列
        {
          label: '分类名称',
          prop: 'cat_name',
          headerAlign: 'center',
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          headerAlign: 'center',
          align: 'center',
          type: 'template',
          template: 'cat_deleted',
        },
        {
          label: '排序',
          prop: 'cat_level',
          headerAlign: 'center',
          align: 'center',
          type: 'template',
          template: 'cat_level',
        },
        {
          label: '操作',
          prop: '',
          headerAlign: 'center',
          align: 'center',
          type: 'template',
          template: 'cat_set',
        },
      ],
      cate_total: 0,
      cate_tableLoad: false,
      cate_dialog: false,
      //是否设置
      is_set: false,
      //添加类别表单
      addCateform: {
        cat_pid: 0,
        cat_level: 0,
        cat_name: '',
        //父级名称
        parentname: [],
        //父级集合
        parentlist: [],
      },
      //添加类别表单规则
      addCateformRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    //获取分类列表
    async getCateList() {
      this.cate_tableLoad = true
      const { data: result } = await this.$http.get(
        'https://localhost:44379/api/Category/GetCategoryTree',
        {
          params: {
            page: this.cate_queryInfo.pagenum,
            pageSize: this.cate_queryInfo.pagesize,
          },
        }
      )
      this.cate_total = result.pagedata.count
      this.cate_list = result.data
      this.cate_tableLoad = false
      console.log(result)
    },
    //显示修改对话框
    showEditMessage(val) {
      this.set_form = val
      this.addCateform.cat_name = val.cat_name
      //把参数设置成修改
      this.is_set = true
      //打开添加类别弹层
      this.addCategories()
    },
    //删除对话框
    async showDeleteMessage(val) {
      const { data: res } = await this.$http.delete(
        'https://localhost:44379/api/Category/DelelteCategory' + val.cat_id
      )
      if (res.meta.status == 200) {
        this.$message.success('删除成功')
        //获取分类列表
        this.getCateList()
      } else {
        return this.$message.error('删除失败')
      }
    },
    handleSizeChange(val) {
      this.cate_queryInfo.pagesize = val
      //获取分类列表
      this.getCateList()
    },
    handleCurrentChange(val) {
      this.cate_queryInfo.pagenum = val
      //获取分类列表
      this.getCateList()
    },
    //打开添加类别弹层
    addCategories() {
      //获取父级分类集合
      this.getParentCateList()
      this.cate_dialog = true
    },
    //获取父级分类集合
    async getParentCateList() {
      const { data: res } = await this.$http.get(
        'https://localhost:44379/api/Category/GetCategoryTree',
        {
          params: { type: 2 },
        }
      )
      this.addCateform.parentlist = res.data
    },

    //设置类别（添加/修改）
    setCategories() {

        
      this.$refs['addCateformRef'].validate(async (valid) => {
        if (valid) {
          if (this.is_set) {
            //修改
            const { data: res } = await this.$http.post(
              'https://localhost:44379/api/Category/UpdateCategory',
              this.$qs.stringify({
                Category_Name: this.addCateform.cat_name,
                Category_PId : this.addCateform.parentlist.cat_id,
                Category_Id:this.set_form.cat_id
              })
            )
            if (res.status > 0) {
              this.$message.success('修改成功')
              //获取分类列表
              this.getCateList()
              this.is_set = false
            } else {
              return this.$message.error('修改失败')
            }
          } else {
              this.$refs['addCateformRef'].resetFields();
            //添加
            const { data: res } = await this.$http.post(
              'https://localhost:44379/api/Category/CreateCategory',
              this.addCateform
            )
            if (res.status == 201) {
              this.$message.success('创建成功')
              //获取分类列表
              this.getCateList()
            } else {
              return this.$message.error('创建失败')
            }
          }

          this.cate_dialog = false
        } else {
          return false
        }
      })
    },
    //获取当前父级
    getCurrentParent(val) {
      if (val.length == 1) {
        this.addCateform.cat_level = 1
        this.addCateform.cat_pid = val[0]
      } else if (val.length == 2) {
        this.addCateform.cat_level = 2
        this.addCateform.cat_pid = val[1]
      }
    },
    //对话框关闭
    cateDialogClose(done) {
      this.addCateform.cat_level = 0
      this.addCateform.cat_pid = 0
      this.addCateform.cat_name = ''
      this.addCateform.parentname = []
      done()
    },
  },
}
</script>
<style lang="less" scoped>
.cate_table_header {
  display: flex;
}

.tree-table {
  margin-top: 15px;
}
</style>